<template>
  <div class="cluster-container">
    <div class="cluster-header">
      <el-image
        style="width: 100px; height: 100px"
        :src="require('@/assets/header_images/userManage.png')"
      ></el-image>
      <div class="title">
        审计日志
        <div class="title-content">
          对系统用户账户及其权限进行创建、维护、删除等过程的统一管理，确保系统安全性、数据完整性和用户访问合规性
        </div>
      </div>
    </div>
    <div class="user-info">
      <div class="user-operate">
        <el-row :gutter="10">
          <el-col :xs="7" :sm="7" :md="6" :lg="6" :xl="6">
            <span class="keyword">关键词</span>
            <el-input
              placeholder="通过日志信息检索"
              style="width: 70%; margin-left: 5px;"
              clearable
              v-model="searchKeyword"
              @input="handleSearch"
            >
            </el-input>
          </el-col>
          <el-col :xs="7" :sm="7" :md="6" :lg="7" :xl="6">
            <span class="keyword">操作分类</span>
            <el-select
              v-model="operationValue"
              style="margin-left: 5px; width: 70%;"
              clearable
              placeholder="请选择操作分类"
              @input="handleOperationValueSearch"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-col>
          <el-col :xs="7" :sm="7" :md="10" :lg="9" :xl="9">
            <span class="keyword">起止日期</span>
            <el-date-picker
              class="dateSelector"
              style="width: 70%;"
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="起始日期"
              end-placeholder="截止日期"
              @input="selectedDate"
            >
            </el-date-picker>
          </el-col>
          <el-col :xs="3" :sm="3" :md="2" :lg="2" :xl="1">
            <div class="operate" v-if="multipleSelection.length">
              <el-button
                type="primary"
                @click="downloadSelectedRow"
                class="el-button-primary-style"
              >下载
              </el-button>
            </div>
          </el-col>
        </el-row>
        <!--        <div>-->
        <!--          <span class="keyword">关键词</span>-->
        <!--          <el-input-->
        <!--            placeholder="通过日志信息检索"-->
        <!--            style="width: 20%; margin-left: 10px;"-->
        <!--            clearable-->
        <!--            v-model="searchKeyword"-->
        <!--            @input="handleSearch"-->
        <!--          >-->
        <!--          </el-input>-->
        <!--          &lt;!&ndash; 筛选 &ndash;&gt;-->
        <!--          <span class="keyword" style="margin-left: 30px">操作分类</span>-->
        <!--          <el-select-->
        <!--            v-model="operationValue"-->
        <!--            style="margin-left: 10px"-->
        <!--            clearable-->
        <!--            placeholder="请选择操作分类"-->
        <!--            @input="handleOperationValueSearch"-->
        <!--          >-->
        <!--            <el-option-->
        <!--              v-for="item in options"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value"-->
        <!--            >-->
        <!--            </el-option>-->
        <!--          </el-select>-->
        <!--          &lt;!&ndash; 日期选择器 &ndash;&gt;-->
        <!--          <span class="keyword" style="margin-left: 30px">起止日期</span>-->
        <!--          <div class="dateSelector">-->
        <!--            <el-date-picker-->
        <!--              v-model="date"-->
        <!--              type="daterange"-->
        <!--              range-separator="至"-->
        <!--              start-placeholder="起始日期"-->
        <!--              end-placeholder="截止日期"-->
        <!--              @input="selectedDate"-->
        <!--            >-->
        <!--            </el-date-picker>-->
        <!--          </div>-->
        <!--          <div class="operate" v-if="multipleSelection.length">-->
        <!--            &lt;!&ndash;          <el-button&ndash;&gt;-->
        <!--            &lt;!&ndash;            type="danger"&ndash;&gt;-->
        <!--            &lt;!&ndash;            @click="deleteSelectedRow"&ndash;&gt;-->
        <!--            &lt;!&ndash;            style="margin-left: 20px; width: 100px"&ndash;&gt;-->
        <!--            &lt;!&ndash;          >删除&ndash;&gt;-->
        <!--            &lt;!&ndash;          </el-button>&ndash;&gt;-->
        <!--            <el-button-->
        <!--              type="primary"-->
        <!--              @click="downloadSelectedRow"-->
        <!--              style="margin-left: 20px;"-->
        <!--              class="el-button-primary-style"-->
        <!--            >下载-->
        <!--            </el-button>-->
        <!--          </div>-->
        <!--        </div>-->
      </div>
      <div class="user-table">
        <el-table
          ref="multipleTable"
          tooltip-effect="dark"
          style="width: 100%"
          :data="tableData"
          @selection-change="handleSelectionChange"
          height="60vh"
        >
          <el-table-column type="selection" width="100rem" align="center"></el-table-column>
          <el-table-column prop="userName" label="用户名">
          </el-table-column>
          <!-- <el-table-column prop="id" label="租户id" width="250rem">
          </el-table-column> -->
          <el-table-column label="操作分类">
            <template slot-scope="scope">
              {{ getOperateTargetType(scope.row.targetType) }}
            </template>
          </el-table-column>
          <el-table-column label="操作类型" prop="targetName">
          </el-table-column>
          <el-table-column label="日志信息">
            <template slot-scope="scope">
                <span class="descSpan">
                  {{ scope.row.logInfo }}
                </span>
            </template>
          </el-table-column>
          <el-table-column prop="operatorIp" label="操作地址">
          </el-table-column>
          <el-table-column prop="updateTime" label="操作时间">
          </el-table-column>
          <!--          <el-table-column prop="updateTime" label="操作">-->
          <!--            <template slot-scope="scope">-->
          <!--              <el-button type="text" style="color:#F56C6C;" size="small" @click="deleteLogByRow(scope.row)">删除</el-button>-->
          <!--&lt;!&ndash;              <el-dropdown&ndash;&gt;-->
          <!--&lt;!&ndash;                @command="&ndash;&gt;-->
          <!--&lt;!&ndash;                  (command) => {&ndash;&gt;-->
          <!--&lt;!&ndash;                    handleCommand(command, row.row);&ndash;&gt;-->
          <!--&lt;!&ndash;                  }&ndash;&gt;-->
          <!--&lt;!&ndash;                "&ndash;&gt;-->
          <!--&lt;!&ndash;                trigger="click"&ndash;&gt;-->
          <!--&lt;!&ndash;              >&ndash;&gt;-->
          <!--&lt;!&ndash;                <span class="el-dropdown-link" @click="ifChooseRow(row)">&ndash;&gt;-->
          <!--&lt;!&ndash;                  更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>&ndash;&gt;-->
          <!--&lt;!&ndash;                </span>&ndash;&gt;-->
          <!--&lt;!&ndash;                <el-dropdown-menu slot="dropdown" v-if="showDropdown">&ndash;&gt;-->
          <!--&lt;!&ndash;                  <el-dropdown-item command="delete" style="color: #f56c6c">删除&ndash;&gt;-->
          <!--&lt;!&ndash;                  </el-dropdown-item>&ndash;&gt;-->
          <!--&lt;!&ndash;                </el-dropdown-menu>&ndash;&gt;-->
          <!--&lt;!&ndash;              </el-dropdown>&ndash;&gt;-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <div style="margin-top: 10px; float: right">
          <el-pagination
            background
            layout="total, prev, pager, next, jumper"
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :current-page.sync="pagination.pageNum"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "AuditLogs",
    data() {
      return {
        showDropdown: true,
        key: "value",
        options: [
          {
            value: 0,
            label: "认证操作",
          },
          {
            value: 1,
            label: "添加操作",
          },
          {
            value: 2,
            label: "删除操作",
          },
          {
            value: 3,
            label: "修改操作",
          },
        ],
        // 操作分类内容
        operationValue: null,
        // 勾选框内容
        multipleSelection: [],
        // 当前行日志信息
        currentLogInfo: {},
        tableData: [],
        selectedIds: [],
        searchKeyword: "",
        pagination: {
          total: 0,
          pageNum: 1,
          pageSize: 10,
        },
        date: "",
        startDate: "",
        endDate: "",
        filterKey: "",
        operationClassification: null,
      };
    },
    methods: {
      fetchLogData() {
        this.$auditLogApi.filterLogInfo({
          filterKey: this.searchKeyword,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize,
          operationClassification: this.operationValue,
          startDate: this.startDate,
          endDate: this.endDate,
        }).then((res) => {
          if (res && res.code === 200) {
            this.tableData = res.data.records;
            this.pagination.total = res.data.total;
          }
        }).catch((error) => {
          console.log("111", error);
        });
      },
      //表格选择项，获得选中的行的信息数组
      handleSelectionChange(val) {
        this.multipleSelection = val;
        this.selectedIds = val.map((row) => row.id); // 所有选中行的 id
      },
      selectedDate() {
        this.startDate = "";
        this.endDate = "";
        if (this.date && this.date.length === 2) {
          const startDateTimestamp = this.date[0].getTime() / 1000;
          const endDateTimestamp = this.date[1].getTime() / 1000;

          this.startDate = startDateTimestamp.toString();
          this.endDate = endDateTimestamp.toString();
        }
        this.fetchLogData();
      },

      deleteSelectedRow() {
        this.$auditLogApi.deleteLogInfo(this.selectedIds)
          .then((response) => {
            if (response && response.code === 200) {
              this.$message.success(response.data);
              this.fetchLogData();
            }
          }).catch((error) => {
          console.error(error);
        });
      },
      downloadSelectedRow() {
        const id = this.selectedIds;
        window.open(`/gv-kube/resource/operate/export?ids=${id}`);
      },
      handleSearch() {
        this.pagination.pageNum = 1; // 搜索时重置页码
        this.fetchLogData();
      },
      handleOperationValueSearch() {
        this.fetchLogData();
      },
      handlePageChange(pageNum) {
        this.pagination.pageNum = pageNum;
        this.fetchLogData();
      },
      getOperateTargetType(operateTarget) {
        const statusMap = {
          0: "认证操作",
          1: "添加操作",
          2: "删除操作",
          3: "修改操作",
        };
        return statusMap[operateTarget] || "未知类型";
      },
      deleteLogByRow(row) {
        if (this.selectedIds.length > 1) {
          this.$message.error("删除失败，只能删除一条数据");
          return;
        }
        this.$auditLogApi.deleteLogInfo([row.id])
          .then((response) => {
            if (response && response.code === 200) {
              this.$message.success(response.data);
              this.fetchLogData();
            }
          }).catch((error) => {
          console.error(error);
        });
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.fetchLogData();
      });
    },
  };
</script>

<style scoped>

  .user-info {
    margin-top: 10px;
  }

  .user-operate {
    background-color: #f9fbfd;
    padding: 10px 0;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }

  .keyword {
    /*padding-left: 10px;*/
    font-size: 14px;
  }

  .dateSelector {
    margin-left: 5px;
    display: inline-block;
  }

  .operate {
    display: inline-block;
  }

  ::v-deep .el-table thead {
    font-size: initial;
    color: #606266;
    font-weight: 500;
  }

  ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #304156;
  }
</style>
